// custom-tab-bar/index.js
import {
  storeBindingsBehavior
} from "mobx-miniprogram-bindings";
import {
  store
} from "../store/store";
Component({
  behaviors: [storeBindingsBehavior],
  storeBindings: {
    store,
    // 需要的字段
    fields: {
      sum: "sum",
      // 添加activeIndex 当前下标的值
      active: "activeIndex"
    },
    // 需要的方法
    actions: {
      // 前者是当前使用的名字  后者是store 中的 action 方法
      updateActiveIndex: "updateIndex"
    },
  },
  // 设置监听器
  observers: {
    'sum': function (val) {
      // console.log(val, '-----');
      // 改变list[1]中的info
      this.setData({
        'list[1].info': val
      })
    }
  },
  // 让重写的样式生效
  options: {
    styleIsolation: 'shared',
  },
  /**
   * 组件的属性列表
   */
  properties: {

  },

  /**
   * 组件的初始数据
   */
  data: {
    // 赋值 app.json 中的 tabBer-》 list 循环渲染
    "list": [{
        "pagePath": "/pages/home/home",
        "text": "首页",
        "iconPath": "/images/tabs/home.png",
        "selectedIconPath": "/images/tabs/home-active.png"
      },
      {
        "pagePath": "/pages/message/message",
        "text": "消息",
        "iconPath": "/images/tabs/message.png",
        "selectedIconPath": "/images/tabs/message-active.png",
        "info": 2
      },
      {
        "pagePath": "/pages/contact/contact",
        "text": "联系我们",
        "iconPath": "/images/tabs/contact.png",
        "selectedIconPath": "/images/tabs/contact-active.png"
      }
    ]
  },

  /**
   * 组件的方法列表
   */
  methods: {
    onChange(event) {
      // event.detail 的值为当前选中项的索引
      
      // this.setData({
      //   active: event.detail
      // });

      // console.log(event.detail);
      // 调用store 中的action 方法 ，
      this.updateActiveIndex(event.detail)
      // 实现点击切换下标
      wx.switchTab({
        url: this.data.list[event.detail].pagePath,
      })
    },
  }
})